import { reactive } from 'vue';
import Loading from '../Loading';
import styles from './styles.module.scss';

import img1 from './images/1.jpg';
import img2 from './images/6.jpg';
import img3 from './images/3.jpg';
import img4 from './images/4.jpg';
import img5 from './images/5.jpg';
import img6 from './images/2.jpg';

const images = [img1, img2, img3, img4, img5, img6];

export default {
  components: { Loading },
  data () {
    const heart = [];
    for (let i = 0; i < 36; i++) {
      heart.push(i);
    }

    return {
      active: false,
      loading: true,
      heart
    }
  },

  mounted () {
    console.log(images)
    Promise.all(images.map((url, key) =>
      new Promise((resolve, reject) => {
        const img = new Image();
        img.src = url;
        img.onload = function () {
          resolve(url);
        };
        img.onerror = function () {
          reject();
        };
      })
    )).then(values => this.loading = false);
  },

  methods: {
    click () {
      this.active = !this.active;
    },

    renderHeart () {
      return this.heart.map((value) =>
        <div
          key={value}
          class={styles['rib' + (value + 1)]}
          style={{
            transform: 'rotateY(' + (value + 1) * 10 + 'deg) rotateZ(45deg) translate(0.29rem, 0.1rem)'
          }}>
        </div>
      );
    },

    renderCube () {
      const direction = ['out-front', 'out-back', 'out-left', 'out-right', 'out-top', 'out-bottom'];
      return images.map((url, key) =>
        <div
          className={`${styles.div} ${styles[`${direction[key]}`]}`}
          key={key}>
          <img
            src={url}
            style={{
              width: '100%',
              height: '100%'
            }} />
        </div>
      );
    }
  },

  render () {
    return (
      <div class={styles['wrap']}>
        <div class={`${styles.bg} ${this.active ? styles.blur : ''}`}></div>
        <div class={styles['cube-wrap']}>
          {
            this.loading ? (
              <Loading />
            ) : (
              <div class={this.active ? `${styles.cube} ${styles.active}` : styles.cube} onClick={this.click}>
                {this.renderCube()}
                <div class={styles.heart3d}>
                  {this.renderHeart()}
                </div>
              </div>
            )
          }
        </div>
      </div>
    )
  }
}